import {PageContainer} from "@ant-design/pro-layout";
import {getStat} from "@/services/doa/regi";
import RcResizeObserver from "rc-resize-observer";
import {StatisticCard} from "@ant-design/pro-card";
import React, {useEffect, useState} from "react";

const {Divider} = StatisticCard;

const StstAnalysis = () => {
  const [responsive, setResponsive] = useState(false);

  const [stat,setStat] = useState({})

  const [timer,setTimer] = useState(0)

  const updateStat = () => {
    getStat().then((response) => {
      if (response.success) {
        setStat(response.data)
      }
    })
  }

  useEffect(() => {

    setTimer(setInterval(() => {
      updateStat()
    }, 400))

    return () => {
      timer && clearInterval(timer)
    }
  }, [])

  return (
    <PageContainer>

      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <StatisticCard.Group title="注册表系统数据统计" direction={responsive ? 'column' : 'row'}>
          <StatisticCard
            statistic={{
              title: '用户数目',
              // tip: 'irs的数目',
              value: stat.userNum,
              // precision:'2',
              suffix: '个',
            }}
          />
          <Divider type={responsive ? 'horizontal' : 'vertical'}/>
          <StatisticCard
            statistic={{
              title: '数字对象数目',
              value: stat.doNum,
              suffix: '个',
            }}
          />

        </StatisticCard.Group>

      </RcResizeObserver>

    </PageContainer>
  );
};

export default StstAnalysis;
